<template>
    <div>
        <div id="labelQuestions" style="width: 100%; height: 350px;"></div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
import { reqGetLabelQuestion } from "@/api/mistake"


let data = ref([])
let label = ref([])
let value = ref([])
const options = {
    title: {
        text: '各类标签对应的错题数量'
    },
    xAxis: {
        type: 'category',
        data: label.value
    },
    yAxis: {
        type: 'value'
    },

    series: [
        {
            type: 'bar',
            data: value.value,
        }
    ]
}

let radarChart = {}
const initChart = () => {

    radarChart = echarts.init(document.getElementById('labelQuestions'))
    radarChart.setOption(options)
}

onMounted(async () => {
    let result = await reqGetLabelQuestion()
    if (result.code == 1) {
        data.value = result.data
        for (const labelQuestion of data.value) {
            label.value.push(labelQuestion.labelName)
            value.value.push(labelQuestion.count)
        }
        console.log(label.value);
        console.log(value.value);
    }
    initChart()
}) 
</script>
<style scoped></style>